<template>
  <g ref="gEl" stroke-dasharray="3 3" stroke="#c0c0c0" stroke-miterlimit="10" fill="none" :stroke-width="strokeWidth">
    <!-- <path
      :d="d"
    ></path> -->
    <path v-for="el in data" :key="el.d" :d="el.d"></path>
  </g>
</template>
<script setup lang="ts">
import { computed, ref } from "vue";
import { GridLineExpose } from "./types";

const props = defineProps({
  width: {
    required: true,
    type: Number,
  },
  height: {
    required: true,
    type: Number,
  },
  shares: {
    required: true,
    type: Number,
  },
});
const strokeWidth = 1;
// const d = computed(() => {
//   const lineNum = props.shares - 1;
//   const perWidth = (props.width - lineNum * strokeWidth) / props.shares;
//   const arr: string[] = [];
//   for (let i = 0; i < props.shares - 1; i++) {
//     const x = (i + 1) * perWidth + i * strokeWidth;
//     arr.push(`M${x} 0L${x} ${props.height}`);
//   }
//   return arr.join("");
// });

const data = computed(() => {
  const lineNum = props.shares - 1;
  const perWidth = (props.width - lineNum * strokeWidth) / props.shares;
  const result: { d: string }[] = [];
  for (let i = 0; i < props.shares - 1; i++) {
    const x = Math.round((i + 1) * perWidth + i * strokeWidth);
    result.push({ d: `M${x} 0L${x} ${props.height}` });
  }
  const perHeight = (props.height - lineNum * strokeWidth) / props.shares;
  for (let i = 0; i < props.shares - 1; i++) {
    const y = Math.round((i + 1) * perHeight + i * strokeWidth);
    result.push({ d: `M0 ${y}L${props.width} ${y}` });
  }
  return result;
});
const gEl = ref<SVGGElement>();
const myExpose: GridLineExpose = {
  getEl() {
    return gEl.value as SVGGElement;
  },
};
defineExpose(myExpose);
</script>
